<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <link rel="stylesheet" href="css/cart.css">
</head>
<body>
  <div id="div1">
    <div class="container">
      <my-cart></my-cart>
    </div>
  </div>

  <script type="text/javascript">
    
    const CartTitle = {
        props: ['username_cart'],
        template: `
            <div class="title">{{username_cart}}</div>
        `
    }

    const CartList = {
      props: ['list'],
      template: `
      <div>
          <div :key='item.id' v-for='item in list' class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="" @click.prevent='sub(item.id)' >－</a>
              <input type="text" class="num" :value='item.num' @blur='charCountChange(item.id,$event)'  />
              <a href="" @click.prevent='add(item.id)' >＋</a>
            </div>
            <div class="del" @click='delCart(item.id)'>×</div>
          </div>
        </div>
      `,
      methods: {
        delCart: function(id) {
          this.$emit('del-cart',id);
        },
        // 商品更新的方法
        charCountChange: function(id,event) {
            this.$emit('cart-update',{
                option_type: 'change',
                item_id:id,
                item_num:event.target.value    /*event.target指向触发事件的对象，谁触发的事件，就指向谁*/
            })
            
        },
        sub: function(id,event) {
            this.$emit('cart-update',{
                option_type: 'sub',
                item_id:id
            })
        },
        add: function(id,event) {
            this.$emit('cart-update',{
                option_type: 'add',
                item_id:id
            })
        }
      }
    }

    const CartTotal = {
        props: ['list'],
        template: `
            <div class="total">
            <span>总价：{{sum_total}}</span>
            <button>结算</button>
            </div>
        `,
        computed: {
            sum_total: function() {
                // 计算商品的总价
                let sumTotal = 0;
                this.list.forEach(item => {
                    sumTotal += item.price * item.num;
                });
                return sumTotal;
            }
        }
    }
    
    //定义购物车组件
    Vue.component('my-cart', {
     data: function() {
         return {
            username_cart: '张三的购物车',
            list: [{
                id: 1,
                name: 'TCL彩电1',
                price: 100,
                num: 1,
                img: 'img/a.jpg'
                },{
                id: 2,
                name: '机顶盒2',
                price: 1000,
                num: 1,
                img: 'img/b.jpg'
                },{
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg'
                },{
                id: 4,
                name: '小米手机',
                price: 2000,
                num: 1,
                img: 'img/d.jpg'
                },{
                id: 5,
                name: 'PPTV电视',
                price: 2000,
                num: 2,
                img: 'img/e.jpg'
            }]
         }
         
     },
      template: `
        <div class='cart'>
          <cart-title :username_cart='username_cart' ></cart-title>
          <cart-list :list='list' @del-cart='delCart($event)' @cart-update='cartUpdate($event)'  ></cart-list>
          <cart-total :list='list' ></cart-total>
        </div>
      `,
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      },
      methods: {
        delCart: function(item_id) {
          // 1. 找到需要删除的index
          const current_item_index = this.list.findIndex(item => {
            return item.id == item_id;
          });
          // 2. 根据索引删除对应的数据
          this.list.splice(current_item_index,1);
        },
        /*
            商品更新的逻辑：
                1. 输入指定数量的商品
                2. 增加1
                3. 减少1

            输入参数格式：obj_value {
                            option_type='change' or add or sub
                            item_id = 1
                            item_num
                        }

         */
        cartUpdate: function(obj_value) {
            if(obj_value.option_type == 'change') {
                this.list.some(item => {
                    if(item.id == obj_value.item_id) {
                        // 完成更新操作
                        item.num = obj_value.item_num;
                        return true;
                    }
                });
            } else if(obj_value.option_type == 'sub') {
                this.list.some(item => {
                    if(item.id == obj_value.item_id) {
                        // 完成更新操作
                        item.num -= 1;
                        return true;
                    }
                });
            } else if(obj_value.option_type == 'add') {
                this.list.some(item => {
                    if(item.id == obj_value.item_id) {
                        // 完成更新操作
                        item.num += 1;
                        return true;
                    }
                });
            }
        }
      }
    });

    var vm = new Vue({
      el: '#div1',
      data: {

      }
    });

  </script>
</body>
</html>